<template>
<div>
    <title-bar title="残差直方图"></title-bar>
    <ve-histogram :colors="['#3F9EFF']" :data-empty="chartData.rows.length===0" :extend="extend" :legend-visible="true" height="400px" :data="chartData" :settings="chartSettings"></ve-histogram>
</div>
</template>

<script>
import TitleBar from '@/components/TitleBar'
import {
    mapGetters
} from 'vuex'
export default {
    name: 'VisualDisplay',
    components: {
        TitleBar
    },
    computed: {
        ...mapGetters({
            modelDetail: 'common/getModelDetail'
        })
    },
    data () {
        return {
            extend: {
                dataZoom: [{
                    type: 'inside'
                }],
                grid: {
                    left: '100px',
                    right: '100px'
                },
                series: {
                    barMaxWidth: 30,
                    showSymbol: false
                }
            },
            index: 0,
            chartSettings: {
                type: 'histogram',
                xAxisType: 'category',
                yAxisName: ['Frequency'],
                xAxisName: ['MAE']
            },
            chartData: {
                columns: [],
                rows: []
            }
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {
            let rows = this.modelDetail.summary.evaSummary.errHistogram
            this.chartData = {
                columns: ['error', 'frequency'],
                rows
            }
        }
    }
}
</script>
